<template>

	<view class="container">
		<map class="map" :latitude="latitude" :longitude="longitude" :scale="14" />
	</view>

	<view class="containerBtn">
		<button class="sure" @click="submit"> 签到</button>
	
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const latitude = ref(39.909)
	const longitude = ref(116.397)
	import {submitLocationRe} from "@/request/locationRe.js"
	const info = ref({})
	onMounted(() => {
		uni.getLocation({
			type: 'wgs84', // 使用 GPS 坐标
			success: (res) => {
				latitude.value = res.latitude
				longitude.value = res.longitude
				console.log('当前位置：', res.latitude, res.longitude)
			},
			fail: (err) => {
				console.error('获取位置失败：', err)
				uni.showToast({
					title: '无法获取当前位置',
					icon: 'none'
				})
			}
		});
		
		const eventChannel = getCurrentInstance().proxy.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			info.value = data
		})
		
	})
	
	const submit = async  function(){
		await submitLocationRe(info.value,latitude.value,longitude.value).then(res=>{
			console.log(res);
			if(res.data.code == 200){
				uni.showToast({
					title:"签到成功",
					duration:1500,
					icon:"success"
				})
				uni.navigateBack()
			}else{
				uni.showToast({
					title:res.data.message,
					duration:1500,
					icon:'error'
				})
			}
			
		}).catch(err=>{
			console.log(err);
			uni.showToast({
				title:"服务器出错",
				duration:1500,
				icon:"error"
			})
		})
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30px;

		.map {
			width: 600rpxvw;
			height: 500rpx;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		}

	}
	.containerBtn{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30px;
		.sure {
			width: 60%;
			font-size: 17px;
			padding: 0.5em 2em;
			border: transparent;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
			background: dodgerblue;
			color: white;
			border-radius: 4px;
		}
		.sure:hover {
			background: rgb(2, 0, 36);
			background: linear-gradient(90deg, rgba(30, 144, 255, 1) 0%, rgba(0, 212, 255, 1) 100%);
		}
		.sure:active {
			transform: translate(0em, 0.2em);
		}
	}
	
</style>